<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>登录页面</title>
		<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" href="style.css">
	</head>
	<script>
		// 判断密码
		function checkPass(){
		var s= document.getElementById("pwd").value;
		  if(s.length < 8){
		            return 0;
		  }
		 var ls = 0;
		
		 if(s.match(/([a-z])+/)){
		 
		     ls++;
		 
		  }
		
		 if(s.match(/([0-9])+/)){
		       ls++;  
		 }
		
		 if(s.match(/([A-Z])+/)){
		       
		        ls++;
		 
		  }
		  if(s.match(/[^a-zA-Z0-9]+/)){
		        ls++;
		    
		    }
		  if(ls<3){
		document.getElementById("tishi1").innerHTML="<font color='red'>密码复杂度不够，请重新设置！</font>";
		
		  }
		else{
			document.getElementById("tishi1").innerHTML="";
		}
		 }
		function validate() {
		    var pwd1 = document.getElementById("pwd").value;
		    var pwd2 = document.getElementById("pwd1").value;
		 
		<!-- 对比两次输入的密码 -->
		
		    if(pwd1 != pwd2)
		     {
		        document.getElementById("tishi").innerHTML="<font color='red'>两次密码不一致</font>";
		     }
			 else{
				document.getElementById("tishi").innerHTML="<font color='green'>密码一致</font>"; 
			 }
		}
		// 判断手机号
		function checkRegexp() {
				var n=document.getElementById("number").value;
		      var regex = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57]|16[67])[0-9]{8}$/
		      var bool = regex.test(n)
		      console.log(bool)
		      if (!bool) {
		        document.getElementById("tishi2").innerHTML="<font color='red'>输入的不是手机号</font>";
		        return
		      }
			  else{
				  document.getElementById("tishi2").innerHTML="";
			  }
		 
		    }
		// tab标签
		$(document).on("pageinit","#mypage",function(){
		        /* 如果对div1的非空白部分向左滑，那么div1就隐藏，div2就显示，同时页面计数器+1，并更新divnumber这个行内文本 */ 
		        $("#div1").on("swipeleft",function(){ 
		               $(this).addClass('active').siblings().removeClass('active');
		               $('.content').eq(1).removeClass('hide').siblings('.content').addClass('hide');
		             }); 
		        /* 如果对div2的非空白部分向右滑，那么div1就显示，div2就隐藏，同时页面计数器-1，并更新divnumber这个行内文本 */ 
		         $("#div2").on("swiperight",function(){ 
		             $(this).addClass('active').siblings().removeClass('active');
		             $('.content').eq(0).removeClass('hide').siblings('.content').addClass('hide');
		        }); 
		        /* 如果对div2的非空白部分向左滑，那么div2就隐藏，div3就显示，同时页面计数器+1，并更新divnumber这个行内文本，下面如此类推 */ 
		        $("#div2").on("swipeleft",function(){ 
		             $(this).addClass('active').siblings().removeClass('active');
		             $('.content').eq(2).removeClass('hide').siblings('.content').addClass('hide');
		        }); 
		        $("#div3").on("swiperight",function(){ 
		             $(this).addClass('active').siblings().removeClass('active');
		             $('.content').eq(1).removeClass('hide').siblings('.content').addClass('hide'); 
		        });                          
		    }); 
			function choosen1() {
				document.getElementById('lable1').style.background='#7D7DE9';
				document.getElementById('lable1').style.color='white';
				document.getElementById('lable2').style.background='white';
				document.getElementById('lable2').style.color='black';
				document.getElementById('lable3').style.background='white';
				document.getElementById('lable3').style.color='black';
			}
			function choosen2() {
				document.getElementById('lable2').style.background='#7D7DE9';
				document.getElementById('lable2').style.color='white';
				document.getElementById('lable1').style.background='white';
				document.getElementById('lable1').style.color='black';
				document.getElementById('lable3').style.background='white';
				document.getElementById('lable3').style.color='black';
			}
			function choosen3() {
				document.getElementById('lable3').style.background='#7D7DE9';
				document.getElementById('lable3').style.color='white';
				document.getElementById('lable1').style.background='white';
				document.getElementById('lable1').style.color='black';
				document.getElementById('lable2').style.background='white';
				document.getElementById('lable2').style.color='black';
			}
	</script>
	
	<body>
		<div id="outer" data-role="page">
			<div >
				<div style="height: 7rem;">
					<div style="margin: 5.5rem auto;">
						<img src="img/logo.png" >
					</div>
				</div>
					<h1  class="titlefont">校园论坛</h1>
			</div>
			<div >
				<form action="" method="post">
						
						<input class="input1" type="text" name="username" required id="" placeholder="手机号" onfocus="this.placeholder=''" onblur="this.placeholder='手机号'"  data-role="none"/>
							<span class="span1"></span>				
						<input class="input1" style="margin-top: 0;" required type="password" name="password" placeholder="输入密码" onfocus="this.placeholder=''"  data-role="none" onblur="this.placeholder='输入密码'"/>
							<span  class="span1"></span>
			</div>
			<div >
				<a href="main.html" data-transition="pop" style="text-decoration: none;">
					<button class="input1" type="submit" name="" id="submit" data-role="none"><i class="icon-jiantou_1"></i></button>
				</a>
			</div>
			<div  id="footer" style="margin-top: 4rem;padding-top: 2rem;height: 5rem;">
				<span ><a class="a1" href="sign.html" data-transition="slide" >新用户注册</a></span>
			</div>
			</form>
		</div>
		
	</body>
</html>
